<template>
	<view class="vertical_layout card_box">
		<uv-toast ref="toast"></uv-toast>
		<!-- 付费精品课 -->
		<view class="section_title pay_section">
			<view class="title_text">
				<text>精选</text>
				<text class="highlight">进阶课程</text>
				<text class="badge">HOT</text>
			</view>
			<view class="subtitle">深度好课，助你快速提升技能</view>
		</view>

		<!-- 骨架屏或课程列表 -->
		<view v-if="!courses || courses.length === 0">
			<uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
		</view>
		<view v-else>
			<view class="card" v-for="(item, index) in courses" :key="index" @click.stop="goDetail(item.id)">
				<view class="cover">
					<image class="image" :src="item.image" />
				</view>
				<view class="info_box">
					<view class="course_info">
						<view>
							<view class="name">
								<text>{{ item.name }}</text>
							</view>
							<view class="des">
								<text class="content">{{ item.description }}</text>
							</view>
						</view>
						<view class="price_group">
							<text class="price"><text :style="{ fontSize: '24rpx' }">￥</text>{{ item.price }}</text>
							<text class="original_price" :style="{ marginLeft: '14rpx' }">
								<text :style="{ fontSize: '16rpx' }">￥</text>{{ item.originalPrice }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isUserLoggedIn,
		isMerchantLoggedIn
	} from '@/plugins/auth.js';
	export default {
		data() {
			return {
				courses: [],
				pageNum: 1,
				pageSize: 10,
				loading: true,
				skeleton: [
					// 第一个课程卡片骨架屏
					{
						type: 'line',
						num: 1,
						gap: '16rpx',
						style: [
							`
							width: 694rpx;
							height: 264rpx;
							border-radius: 12rpx;
							margin: 0 auto 16rpx;
							padding: 12rpx;
							box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
						`
						]
					},
					// 第二个课程卡片骨架屏
					{
						type: 'line',
						num: 1,
						gap: '16rpx',
						style: [
							`
							width: 694rpx;
							height: 264rpx;
							border-radius: 12rpx;
							margin: 0 auto 16rpx;
							padding: 12rpx;
							box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
						`
						]
					},
					// 第三个课程卡片骨架屏
					{
						type: 'line',
						num: 1,
						gap: '16rpx',
						style: [
							`
							width: 694rpx;
							height: 264rpx;
							border-radius: 12rpx;
							margin: 0 auto 16rpx;
							padding: 12rpx;
							box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
						`
						]
					}
				]
			};
		},

		methods: {
			showToast(msg, type = 'default', duration = 1000) {
				this.$refs.toast.show({
					message: msg,
					type: type,
					duration: duration,
				})
			},
			async handlePayCourses() {
				try {
					this.loading = true;
					const data = await this.$http.get('/course/pay/courses');
					if (data) {
						this.courses = data.items;
						this.pageNum += 1;
					}
				} catch (e) {
					this.showToast('获取课程失败', 'error', 1000);
				} finally {
					this.loading = false;
				}
			},

			goDetail(courseId) {
				if (isMerchantLoggedIn() && !isUserLoggedIn()) {
					this.showToast('请先登录用户端');
					return;
				}
				if (!isUserLoggedIn()) {
					this.showToast('请先登录', 'default', 1000);
					return;
				}
				uni.navigateTo({
					url: `/subpkg/course_detail/course_detail?courseId=${courseId}`
				})
			}
		},

		created() {
			this.handlePayCourses();
		}
	}
</script>

<style lang="scss" scoped>
	@import 'PayCoursesCard.scss';
</style>